import React, { useState, useEffect } from 'react';
import { Card, SegmentedControl, WhiteSpace, Flex, WingBlank, Icon } from 'antd-mobile';
import { Divider, Tooltip, Table } from 'antd';
import { connect } from 'dva';
import _ from 'lodash';
import * as utils from './utils/index';
import FileBtn from '@/components/FileBtn';
import styles from './index.less';

import { getAppApproveData } from '../utils/request';
import { message } from 'antd';

const ApproveMobile = props => {
  utils.createDom();
  const { id, action, taskId } = props.location.query;
  // 说明
  const [description, setDescription] = useState('');
  // 提交时的 loading
  const [submitLoading, setSubmitLoading] = useState(false);
  const [loading, setLoading] = useState(true);
  const [state, setState] = useState({
    projectName: '',
    projectCode: '',
    projectArea: '',
    equityRatio: '',
  });
  const [tabs, setTabs] = useState([]);
  const [fileList, setFileList] = useState([]);
  const [message, setMessage] = useState('');
  const [tabs1key, setTabs1key] = useState(0);
  /* 设置容器的高度 */
  const setDomeHeight = num => {
    if (window.cifioa) {
      window.cifioa.sendMessage({
        type: 'height',
        height: num,
      });
    }
  };
  useEffect(() => {
    setDomeHeight(150);
    getData();
  }, []);
  useEffect(() => {
    const appRoveMobile = document.getElementById('appRoveMobile');
    setDomeHeight(appRoveMobile.offsetHeight - 10);
  }, [tabs1key]);

  // 获取数据
  const getData = async () => {
    const res = await getAppApproveData({ examineId: id });
    if (res.code !== 1) return;
    const { data, files, description, basicInfo } = res;
    setTabs(data); // 表格数据
    console.log('表单数据', res);
    setFileList(files); // 附件数据
    setState(basicInfo); // 基本信息
    setDescription(description); // 说明
    setLoading(false); // loading
    const appRoveMobile = document.getElementById('appRoveMobile');
    setDomeHeight(appRoveMobile.offsetHeight - 10);
  };

  return (
    <div className={styles['app-rove-mobile']}>
      {/* 加载 */}
      <div style={{ height: loading ? '150px' : '0px', background: '#fff' }}>
        <WingBlank>
          <div
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%,-50%)',
            }}
          >
            {loading ? <Icon type="loading" size="lg" /> : null}
          </div>
        </WingBlank>
      </div>
      <div style={{ height: message !== '' ? '150px' : '0px', background: '#fff' }}>
        <WingBlank>
          <div
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%,-50%)',
            }}
          >
            {message}
          </div>
        </WingBlank>
      </div>
      <div id="appRoveMobile">
        {loading ? null : (
          <>
            <Card full style={{ marginTop: '-10px' }}>
              {/* 基本信息 */}
              <WhiteSpace />
              <WingBlank>
                <WhiteSpace />
                <div className="title">基本信息</div>
                <WhiteSpace />
                <Flex justify="between">
                  <Tooltip
                    placement="topLeft"
                    title={`${state.projectName}(${state.projectCode})` || '无'}
                  >
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <span className="ellipsis font2">
                        <span className="font1">项目：</span>
                        {`${state.projectName}（${state.projectCode}）` || '无'}
                      </span>
                    </div>
                  </Tooltip>
                </Flex>
                <Flex justify="between">
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <span className="font1">区域：</span>
                    <span className="font2">{state.projectArea || '无'}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <span className="font1">权益比例：</span>
                    <span className="font2">
                      {Number(_.isNaN(state.equityRatio) ? 0 : state.equityRatio).toFixed(2)}%
                    </span>
                  </div>
                </Flex>
              </WingBlank>
              <WhiteSpace />
              {/* 表格部分 */}
              <Card full>
                <WhiteSpace />
                <WingBlank>
                  <div className="title">回款系数差异</div>
                </WingBlank>
                <div>
                  <WhiteSpace />
                  <Card.Body>
                    <Flex justify="center">
                      <SegmentedControl
                        style={{ height: '30px', width: '300px' }}
                        values={['VS 投资正式版', 'VS 项目实际版', 'VS 城市实际版']}
                        selectedIndex={tabs1key}
                        onChange={e => setTabs1key(e.nativeEvent.selectedSegmentIndex)}
                      />
                    </Flex>
                  </Card.Body>
                  <WhiteSpace />
                </div>
                <WingBlank>
                  {/* 差异 */}
                  {tabs[tabs1key].data ? (
                    <Table
                      // style={{ width: '100%' }}
                      columns={tabs[tabs1key].data.columns}
                      dataSource={tabs[tabs1key].data.dataList}
                      size="middle"
                      bordered
                      pagination={false}
                      scroll={{ x: tabs[tabs1key].data.unitSize * 80, y: 500 }}
                    ></Table>
                  ) : (
                    <WingBlank>
                      <div className="tcenter">{`暂无${tabs[tabs1key].name}数据`}</div>
                      <WhiteSpace />
                    </WingBlank>
                  )}
                </WingBlank>
                <WhiteSpace />
              </Card>
              {/* 审批要点说明 */}
              <WhiteSpace />
              <WingBlank>
                <div className="title">审批要点说明</div>
                <div className="font2">{description}</div>
              </WingBlank>
              <WhiteSpace />
              {fileList && !_.isEmpty(fileList) ? <Divider /> : null} {/* 如果附件不为空加分割线 */}
              {/* 附件 附件为空则不显示 */}
              {fileList && !_.isEmpty(fileList) ? (
                <>
                  <WhiteSpace />
                  <WingBlank>
                    <div className="title">附件</div>
                    {fileList.map(v => (
                      <FileBtn
                        fileId={v.fileId}
                        fileName={v.fileName}
                        clickType="btnClick"
                        titleNmae
                        key={v.fileId}
                        download={true}
                      />
                    ))}
                  </WingBlank>
                  <WhiteSpace />
                </>
              ) : null}
            </Card>
            <WhiteSpace />
          </>
        )}
      </div>
    </div>
  );
};

export default ApproveMobile;
